/*!
 _________
|  初始化  |\
| ~~~~~~~ |_\
| 基础变量 |
| ~~~~~~~ |
| ~~~~~~~ |
|_________|
*/

page {
    /* 
     _________
    |  基础色  |
    |_________|
    */

    // 不变基础色
    /* 黢黑 */
    --black: #333;
    /* 暗灰 */
    --dark-gray: #666;
    /* 烟灰 */
    --grey: #bebebe;
    /* 灰色 */
    --gray: #f0f0f0;
    /* 魂白 */
    --ghost-white: #f5f5f5;
    /* 雪白 */
    --white: #fff;
    /* 透明 */
    --transparent: rgba(0, 0, 0, 0);

    // less 变量
    // 茜红
    @red: #e32636;
    @fusion-red: #ff454a;
    // 热带橙
    @orange: #fa8231;
    @fusion-orange: #fd9644;
    // 寿橘黄
    @yellow: #fca310;
    @fusion-yellow: #fdc871;
    // 寿橘黄
    @olive: #9bcc66;
    @fusion-olive: #c3e999;
    // 常春绿
    @green: #21ba45;
    @fusion-green: #80d283;
    // 孔雀蓝
    @blue-green: #0fb9b1;
    @fusion-blue-green: #2bcbba;
    // 绿松青
    @cyan: #69d4db;
    @fusion-cyan: #97e9ed;
    // 牛仔蓝
    @sky-blue: #2d98da;
    @fusion-sky-blue: #45aaf2;
    // 钢青蓝
    @blue: #1989fa;
    @fusion-blue: #3f9dfb;
    // 紫藤色
    @purple: #8854d0;
    @fusion-purple: #a55eea;
    // 中兰紫
    @mauve: #ce62d6;
    @fusion-mauve: #e38ee9;
    // 开心粉
    @pink: #ff69b4;
    @fusion-pink: #ff97cc;
    // 火砖红
    @brown: #a52a2a;
    @fusion-brown: #c54b4b;
    // 石岩灰
    @blue-grey: #4b6584;
    @fusion-blue-grey: #778ca3;
    /* 
     _________
    |   色彩  |
    |_________|
    */
    @colorType: null, dark, light;
    @notescolorType: '/*!* 基础色 *!*/', '/*!* dark *!*/', '/*!*!* light *!*/';
    @colors: red, fusion-red, orange, fusion-orange, yellow, fusion-yellow, olive,
        fusion-olive, green, fusion-green, blue-green, fusion-blue-green, cyan,
        fusion-cyan, sky-blue, fusion-sky-blue, blue, fusion-blue, purple,
        fusion-purple, mauve, fusion-mauve, pink, fusion-pink, brown, fusion-brown,
        blue-grey, fusion-blue-grey;
    @colorText: '/*茜红*/', '/*融合茜红*/', '/*热带橙*/', '/*融合热带橙*/', '/*寿橘黄*/', '/*融合寿橘黄*/', '/*橄榄绿*/', '/*融合橄榄绿*/', '/*常春绿*/', '/*融合常春绿*/', '/*孔雀蓝*/', '/*融合孔雀蓝*/', '/*绿松青*/', '/*融合绿松青*/', '/*牛仔蓝*/', '/*融合牛仔蓝*/', '/*钢青蓝*/', '/*融合钢青蓝*/', '/*紫藤色*/', '/*融合紫藤色*/', '/*中兰紫*/', '/*融合中兰紫*/', '/*开心粉*/', '/*融合开心粉*/', '/*火砖红*/', '/*融合火砖红*/', '/*石岩灰*/', '/*融合石岩灰*/';
    .colorType(@colorType);
    .colorType(@colorType, @i: 1) when (length(@colorType) >= @i) {
        @typeName: extract(@colorType, @i);
        @notesType: extract(@notescolorType, @i);
        e(@notesType);
        .color(@colors);
        .color(@colors, @j: 1) when (length(@colors) >= @j) {
            @name: extract(@colors, @j);
            @notes: extract(@colorText, @j);
            .bgType(@typeName);
            // 判断是否是占位符
            .bgType(@typeName) when (@typeName = null) {
                e(@notes);
                --@{name}: @@name;
            }
            .bgType(@typeName) when (@typeName = dark) {
                e(@notes);
                --@{typeName}-@{name}: darken(@@name, 13%);
            }
            .bgType(@typeName) when (@typeName = light) {
                e(@notes);
                --@{typeName}-@{name}: lighten(@@name, 18%);
            }
            .color(@colors, (@j + 1));
        }
        .colorType(@colorType, (@i + 1));
    }

    /* 
     _________
    | disabled|
    |_________|
    */
    /* 茜红 */
    --disabled-red: #d3636c;
    --disabled-fusion-red: #fda9ae;
    /* 热带橙 */
    --disabled-orange: #fdc8a4;
    --disabled-fusion-orange: #fecca5;
    /* 寿橘黄 */
    --disabled-yellow: #fbdfa2;
    --disabled-fusion-yellow: #ffeca5;
    /* 橄榄绿 */
    --disabled-olive: #d5e9be;
    --disabled-fusion-olive: #d6f0b9;
    /* 常春绿 */
    --disabled-green: #b1f2d0;
    --disabled-fusion-green: #aef3d0;
    /* 孔雀蓝 */
    --disabled-blue-green: #a8f8f4;
    --disabled-fusion-blue-green: #b7f0ea;
    /* 绿松青 */
    --disabled-cyan: #b8ebee;
    --disabled-fusion-cyan: #b8f0f3;
    /* 牛仔蓝 */
    --disabled-sky-blue: #b2d9f2;
    --disabled-fusion-sky-blue: #b3dcfa;
    /* 钢青蓝 */
    --disabled-blue: #9ecdf0;
    --disabled-fusion-blue: #bbd4ef;
    /* 紫藤色 */
    --disabled-purple: #d3c0ee;
    --disabled-fusion-purple: #d5b5f5;
    /* 中兰紫 */
    --disabled-mauve: #ebbfee;
    --disabled-fusion-mauve: #ebafef;
    /* 开心粉 */
    --disabled-pink: #ffa4d1;
    --disabled-fusion-pink: #ffabd6;
    /* 火砖红 */
    --disabled-brown: #edb9b9;
    --disabled-fusion-brown: #ebc2c2;
    /* 石岩灰 */
    --disabled-blue-grey: #c7d2df;
    --disabled-fusion-blue-grey: #c9d1da;

    /* 
     _________
    |  渐变色  |
    |_________|
    */
    /* 渐变茜红 */
    --gradual-red: linear-gradient(20deg, #e32636, #e92758, #eb3b86);
    /* 渐变热带橙 */
    --gradual-orange: linear-gradient(20deg, #fa5031, #fa8231, #fab431);
    /* 渐变寿橘黄 */
    --gradual-yellow: linear-gradient(20deg, #fc6810, #fca310, #fcde10);
    /* 渐变橄榄绿 */
    --gradual-olive: linear-gradient(20deg, #82cc66 , #9bcc66, #b5cc66);
    /* 渐变常春绿 */
    --gradual-green: linear-gradient(20deg, #15bcaf, #13ab9e, #11996c);
    /* 渐变孔雀蓝 */
    --gradual-blue-green: linear-gradient(20deg, #0fb9b1, #13e8de, #27ede4);
    /* 渐变绿松青 */
    --gradual-cyan: linear-gradient(20deg, #00bbd4, #45dcca, #8dffc0);
    /* 渐变牛仔蓝 */
    --gradual-sky-blue: linear-gradient(20deg, #2d6dda, #2d98da, #2dc3da);
    /* 渐变钢青蓝 */
    --gradual-blue: linear-gradient(20deg, #2d6dda, #1976d2, #19a4d2);
    /* 渐变紫藤色 */
    --gradual-purple: linear-gradient(20deg, #5f5eea, #825eea, #a55eea);
    /* 渐变浅紫 */
    --gradual-light-purple: linear-gradient(20deg, #a770ef, #cf8Bf3, #fdb99b);
    /* 渐变中兰紫 */
    --gradual-mauve: linear-gradient(20deg, #b162d6, #ce62d6, #d662c1);
    /* 渐变开心粉 */
    --gradual-pink: linear-gradient(20deg, #ff698f, #ff69b4, #ff69da);;
    /* 渐变火砖红 */
    --gradual-brown: linear-gradient(20deg, #93291e, #ed213a, #ed216d);
    /* 渐变石岩灰 */
    --gradual-blue-grey: linear-gradient(20deg, #3f4c6b, #606c88, #56799c);

    /* 
     _________
    |阴影透明色|
    |________|
    */
    --shadow-size: 6rpx 6rpx 8rpx;
    /* 茜红 */
    --shadow-red:rgba(235, 59, 90, .2);
    --shadow-fusion-red: rgba(252, 92, 101, .2);
    /* 热带橙 */
    --shadow-orange: rgba(250, 130, 49, .2);
    --shadow-fusion-orange: rgba(253, 150, 68, .2);
    /* 寿橘黄 */
    --shadow-yellow: rgba(247, 183, 49, .2);
    --shadow-fusion-yellow: rgba(254, 211, 48, .2);
    /* 橄榄绿 */
    --shadow-olive: rgba(155, 204, 102, .2);
    --shadow-fusion-olive: rgba(195, 233, 153, .2);
    /* 常春绿 */
    --shadow-green: rgba(32, 191, 107, .2);
    --shadow-fusion-green: rgba(38, 222, 129, .2);
    /* 孔雀蓝 */
    --shadow-blue-green: rgba(15, 185, 177, .2);
    --shadow-fusion-blue-green: rgba(43, 203, 186, .2);
    /* 绿松青 */
    --shadow-cyan: rgba(105, 212, 219, .2);
    --shadow-fusion-cyan: rgba(151, 233, 237, .2);
    /* 牛仔蓝 */
    --shadow-sky-blue: rgba(45, 152, 218, .2);
    --shadow-fusion-sky-blue: rgba(69, 170, 242, .2);
    /* 钢青蓝 */
    --shadow-blue: rgba(56, 103, 214, .2);
    --shadow-fusion-blue: rgba(75, 123, 236, .2);
    /* 紫藤色 */
    --shadow-purple: rgba(136, 84, 208, .2);
    --shadow-fusion-purple: rgba(165, 94, 234, .2);
    /* 中兰紫 */
    --shadow-mauve: rgba(206, 98, 214, .2);
    --shadow-fusion-mauve: rgba(227, 142, 233, .2);
    /* 开心粉 */
    --shadow-pink: rgba(255, 105, 180, .2);
    --shadow-fusion-pink: rgba(255, 151, 204, .2);
    /* 火砖红 */
    --shadow-brown: rgba(165, 42, 42, .2);
    --shadow-fusion-brown: rgba(197, 75, 75, .2);
    /* 石岩灰 */
    --shadow-blue-grey: rgba(75, 101, 132, .2);
    --shadow-fusion-blue-grey: rgba(119, 140, 163, .2);
    // 不变基础色
    /* 黢黑 */
    --shadow-black: rgba(51, 51, 51, .2);
    /* 暗灰色 */
    --shadow-dark-gray: rgba(102, 102, 102, .2);
    /* 烟灰色 */
    --shadow-grey: rgba(190, 190, 190, .2);
    /* 灰色 */
    --shadow-gray: rgba(170, 170, 170, .2);
    /* 白色 */
    --shadow-white: var(--shadow-black);
}
